<template>
  <view class="my-profile-container planet-bg">
    <!-- 星空背景 -->
    <view class="stars">
      <view v-for="star in stars" :key="star.id" class="star" :style="star.style"></view>
    </view>
    
    <!-- 个人信息区域 -->
    <view class="profile-header">
      <view class="avatar-section">
        <image class="avatar" :src="userInfo.avatar || '/static/logo.png'" mode="aspectFill"></image>
        <view class="user-badge">
          <text class="user-level">Lv.{{ userInfo.level }}</text>
        </view>
        <!-- 会员标识 -->
        <view class="member-badge" v-if="memberInfo.isMember">
          <text class="member-icon">👑</text>
        </view>
      </view>
      <view class="user-info">
        <text class="username">{{ userInfo.nickname || '星际探索者' }}</text>
        <text class="user-id">ID: {{ userInfo.userId || 'user12345' }}</text>
        <!-- 会员信息 -->
        <text class="member-status" v-if="memberInfo.isMember">
          {{ memberInfo.memberType.toUpperCase() }}会员 (剩余{{ memberDaysLeft }}天)
        </text>
        <text class="non-member-status" v-else>
          非会员 (点击开通获取更多权益)
        </text>
      </view>
    </view>
    
    <!-- PLUS会员领星钻横幅按钮 -->
    <view class="member-promo" @tap="navigateTo('pages/bottle/plus-member')">
      <text class="promo-icon">💎</text>
      <text class="promo-text">PLUS会员领星钻</text>
    </view>
  
    
    <!-- 个人中心菜单 -->
    <view class="profile-menu">
    
      <!-- 会员相关菜单 -->
      <view class="menu-group">
        <view class="menu-item" @tap="navigateTo('pages/bottle/plus-member')">
          <view class="menu-left">
            <view class="menu-icon">👑</view>
            <text class="menu-text">会员中心</text>
          </view>
          <text class="menu-arrow">▶</text>
        </view>
        
        <view class="menu-item" @tap="showPurchaseHistory">
          <view class="menu-left">
            <view class="menu-icon">📋</view>
            <text class="menu-text">购买历史</text>
          </view>
          <text class="menu-arrow">▶</text>
        </view>
      </view>
      
      
      <!-- 功能菜单 -->
      <view class="menu-group">
        <view class="menu-item" @tap="navigateTo('pages/bottle/throw-bottle')">
          <view class="menu-left">
            <view class="menu-icon">🏺</view>
            <text class="menu-text">扔漂流瓶</text>
          </view>
          <text class="menu-arrow">▶</text>
        </view>
        
        <view class="menu-item" @tap="navigateTo('pages/bottle/pick-bottle')">
          <view class="menu-left">
            <view class="menu-icon">🎣</view>
            <text class="menu-text">捞漂流瓶</text>
          </view>
          <text class="menu-arrow">▶</text>
        </view>
      </view>
      
      <!-- 设置菜单 -->
      <view class="menu-group">
        <view class="menu-item" @tap="showSettings">
          <view class="menu-left">
            <view class="menu-icon">⚙️</view>
            <text class="menu-text">设置</text>
          </view>
          <text class="menu-arrow">▶</text>
        </view>
        
        <view class="menu-item" @tap="showAbout">
          <view class="menu-left">
            <view class="menu-icon">ℹ️</view>
            <text class="menu-text">关于我们</text>
          </view>
          <text class="menu-arrow">▶</text>
        </view>
      </view>
      
      <!-- 退出登录按钮 -->
      <view class="logout-section">
        <button class="logout-btn" @tap="logout">退出登录</button>
      </view>
    </view>
    
    <!-- 漂流瓶详情弹窗 -->
    <view class="bottle-detail-modal" v-if="showDetailModal">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">漂流瓶详情</text>
          <text class="close-btn" @tap="closeDetailModal">✕</text>
        </view>
        <view class="modal-body">
          <view class="detail-bottle" :class="getBottleTypeClass(selectedBottle.type)">
            <view class="detail-content">{{ selectedBottle.content }}</view>
          </view>
          <view class="detail-meta">
            <text class="detail-label">来源:</text>
            <text class="detail-value">{{ selectedBottle.from || '未知来源' }}</text>
          </view>
          <view class="detail-meta">
            <text class="detail-label">时间:</text>
            <text class="detail-value">{{ formatTime(selectedBottle.time) }}</text>
          </view>
          <view class="detail-meta">
            <text class="detail-label">状态:</text>
            <text class="detail-value">{{ getBottleTypeText(selectedBottle.type) }}</text>
          </view>
        </view>
        <view class="modal-footer">
          <button class="btn btn-outline" @tap="closeDetailModal">关闭</button>
          <button class="btn btn-primary" @tap="deleteCurrentBottle">删除</button>
        </view>
      </view>
    </view>
    
    <!-- 购买历史弹窗 -->
    <view class="purchase-history-modal" v-if="showPurchaseHistoryModal">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">购买历史</text>
          <text class="close-btn" @tap="closePurchaseHistoryModal">✕</text>
        </view>
        <view class="modal-body">
          <view class="purchase-list" v-if="purchaseHistory.length > 0">
            <view class="purchase-item" v-for="item in purchaseHistory" :key="item.id">
              <view class="purchase-info">
                <text class="purchase-type">PLUS会员 {{ item.period }}</text>
                <text class="purchase-date">{{ formatTime(item.date) }}</text>
              </view>
              <text class="purchase-price">¥{{ item.price }}</text>
            </view>
          </view>
          <view class="empty-purchase" v-else>
            <view class="empty-icon">📋</view>
            <text class="empty-text">暂无购买记录</text>
          </view>
        </view>
        <view class="modal-footer">
          <button class="btn btn-primary" @tap="closePurchaseHistoryModal">关闭</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getMyBottles } from '../../src/api/bottle/bottleApi';
  import { getMemberInfo, getPurchaseHistory } from '../../src/api/plus-member/plusMemberApi';
  import { showToast, formatTime, formatRelativeTime } from '../../src/common/tools';
  
  export default {
    data() {
      return {
        // 用户信息
        userInfo: {
          nickname: '星际探索者',
          userId: 'user12345',
          level: 3,
          avatar: '/static/logo.png'
        },
        
        // 统计数据
        stats: {
          sentBottles: 0,
          receivedBottles: 0,
          collectedBottles: 0,
          followingPlanets: 5
        },
        
        // 会员信息
        memberInfo: {
          isMember: false,
          memberType: '',
          expiryDate: '',
          purchaseDate: ''
        },
        
        // 购买历史
        purchaseHistory: [],
        
        // 弹窗控制
        showPurchaseHistoryModal: false,
        
        // 瓶子相关数据
        activeTab: 'all', // all, sent, received, collected
        bottles: [],
        selectedBottle: null,
        showDetailModal: false,
        showBottleSection: true, // 控制瓶子列表的显示与隐藏
        stars: [],
        // 模拟瓶子数据
        mockBottles: [
          {
            id: 'sent-1',
            content: '在这个浩瀚的宇宙中，我们都是渺小的存在，但每一个存在都有其独特的意义。',
            from: '地球',
            time: new Date(Date.now() - 86400000 * 2).toISOString(),
            type: 'sent',
            liked: false,
            collected: false
          },
          {
            id: 'sent-2',
            content: '希望有一天，人类能够探索宇宙的每一个角落，发现更多的奥秘。',
            from: '地球',
            time: new Date(Date.now() - 86400000 * 5).toISOString(),
            type: 'sent',
            liked: true,
            collected: false
          },
          {
            id: 'received-1',
            content: '宇宙如此浩瀚，我们的相遇是多么奇妙的缘分！',
            from: '银河系',
            time: new Date(Date.now() - 86400000 * 1).toISOString(),
            type: 'received',
            liked: true,
            collected: true
          },
          {
            id: 'received-2',
            content: '每一颗星星都有属于自己的故事，你愿意听听我的吗？',
            from: '火星',
            time: new Date(Date.now() - 86400000 * 3).toISOString(),
            type: 'received',
            liked: false,
            collected: true
          },
          {
            id: 'received-3',
            content: '当你看到这个漂流瓶时，我可能已经在另一个时空了...',
            from: '未来',
            time: new Date(Date.now() - 86400000 * 6).toISOString(),
            type: 'received',
            liked: true,
            collected: false
          }
        ]
      };
    },
    computed: {
      // 根据当前标签筛选瓶子
      filteredBottles() {
        switch (this.activeTab) {
          case 'sent':
            return this.bottles.filter(bottle => bottle.type === 'sent');
          case 'received':
            return this.bottles.filter(bottle => bottle.type === 'received');
          case 'collected':
            return this.bottles.filter(bottle => bottle.collected);
          default:
            return this.bottles;
        }
      },
      
      // 计算会员剩余天数
      memberDaysLeft() {
        if (!this.memberInfo.isMember || !this.memberInfo.expiryDate) {
          return 0;
        }
        
        const now = new Date();
        const expiryDate = new Date(this.memberInfo.expiryDate);
        const diffTime = expiryDate - now;
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        
        return Math.max(0, diffDays);
      }
    },
    onLoad() {
      // 初始化星空背景
      this.initStars();
      // 加载瓶子数据
      this.loadMyBottles();
      // 加载会员信息
      this.loadMemberInfo();
    },
    onShow() {
      // 每次显示页面时重新加载会员信息
      this.loadMemberInfo();
    },
    methods: {
      // 切换瓶子列表的显示与隐藏
      toggleBottleSection() {
        this.showBottleSection = !this.showBottleSection;
      },
      
      // 加载会员信息
      async loadMemberInfo() {
        try {
          // 首先尝试从API获取会员信息
          try {
            const memberInfoResponse = await getMemberInfo();
            if (memberInfoResponse && memberInfoResponse.success) {
              this.memberInfo = memberInfoResponse.data;
              // 将API返回的会员信息保存到本地存储
              uni.setStorageSync('memberInfo', JSON.stringify(this.memberInfo));
            }
          } catch (apiError) {
            console.warn('API获取会员信息失败，尝试从本地存储加载', apiError);
            // 从本地存储加载数据
            const memberInfoStr = uni.getStorageSync('memberInfo');
            if (memberInfoStr) {
              const memberInfo = JSON.parse(memberInfoStr);
              
              // 检查会员是否已过期
              const now = new Date();
              const expiryDate = new Date(memberInfo.expiryDate);
              memberInfo.isMember = now < expiryDate;
              
              this.memberInfo = memberInfo;
            } else {
              this.memberInfo = {
                isMember: false,
                memberType: '',
                expiryDate: '',
                purchaseDate: ''
              };
            }
          }
          
          // 加载购买历史
          try {
            const historyResponse = await getPurchaseHistory();
            if (historyResponse && historyResponse.success) {
              this.purchaseHistory = historyResponse.data || [];
              // 将API返回的购买历史保存到本地存储
              uni.setStorageSync('purchaseHistory', JSON.stringify(this.purchaseHistory));
            }
          } catch (apiError) {
            console.warn('API获取购买历史失败，尝试从本地存储加载', apiError);
            // 从本地存储加载数据
            const purchaseHistoryStr = uni.getStorageSync('purchaseHistory');
            this.purchaseHistory = purchaseHistoryStr ? JSON.parse(purchaseHistoryStr) : [];
          }
          
          // 如果没有购买历史，添加一些模拟数据
          if (this.purchaseHistory.length === 0) {
            this.purchaseHistory = [
              {
                id: Date.now() - 30 * 24 * 60 * 60 * 1000, // 30天前
                type: 'plus_member',
                period: '30天',
                price: 11.99,
                date: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString()
              }
            ];
          }
        } catch (error) {
          console.error('加载会员信息失败', error);
          // 出错时使用默认值
          this.memberInfo = {
            isMember: false,
            memberType: '',
            expiryDate: '',
            purchaseDate: ''
          };
          this.purchaseHistory = [];
        }
      },
      
      // 页面导航
      navigateTo(pagePath) {
        uni.navigateTo({
          url: `/${pagePath}`
        });
      },
      
      // 显示购买历史
      showPurchaseHistory() {
        this.showPurchaseHistoryModal = true;
      },
      
      // 关闭购买历史弹窗
      closePurchaseHistoryModal() {
        this.showPurchaseHistoryModal = false;
      },
      
      // 显示设置
      showSettings() {
        showToast('设置功能即将上线');
      },
      
      // 显示关于我们
      showAbout() {
        showToast('星球漂流瓶 v1.0.0\n探索宇宙的奇妙漂流之旅');
      },
      
      // 退出登录
      logout() {
        uni.showModal({
          title: '确认退出',
          content: '确定要退出登录吗？',
          success: (res) => {
            if (res.confirm) {
              // 清除登录状态
              try {
                uni.removeStorageSync('userInfo');
                uni.removeStorageSync('token');
              } catch (error) {
                console.error('清除登录状态失败', error);
              }
              
              // 跳转到登录页面
              uni.redirectTo({
                url: '/pages/logon/login'
              });
            }
          }
        });
      },
      
      // 更新统计数据
      updateStats() {
        this.stats.sentBottles = this.bottles.filter(b => b.type === 'sent').length;
        this.stats.receivedBottles = this.bottles.filter(b => b.type === 'received').length;
        this.stats.collectedBottles = this.bottles.filter(b => b.collected).length;
      },
      
      // 时间格式化方法
      formatRelativeTime,
      formatTime,
      
      // 初始化星空背景
      initStars() {
        const starCount = 150;
        const tempStars = [];
        
        for (let i = 0; i < starCount; i++) {
          // 随机位置
          const x = Math.random() * 100;
          const y = Math.random() * 100;
          
          // 随机动画时长
          const duration = 2 + Math.random() * 3;
          
          // 随机大小
          const size = 1 + Math.random() * 3;
          
          // 随机透明度
          const opacity = 0.3 + Math.random() * 0.7;
          
          tempStars.push({
            id: `star-${i}`,
            style: {
              left: `${x}%`,
              top: `${y}%`,
              width: `${size}rpx`,
              height: `${size}rpx`,
              opacity: opacity,
              '--duration': `${duration}s`
            }
          });
        }
        
        this.stars = tempStars;
      },
      
      // 加载我的瓶子
      loadMyBottles() {
        try {
          // 从本地存储加载数据，如果没有则使用模拟数据
          const savedBottles = uni.getStorageSync('myBottles');
          
          if (savedBottles && savedBottles.length > 0) {
            this.bottles = JSON.parse(savedBottles);
          } else {
            // 使用模拟数据
            this.bottles = [...this.mockBottles];
            // 保存到本地存储
            this.saveBottles();
          }
          
          // 更新统计数据
          this.updateStats();
        } catch (error) {
          console.error('加载瓶子数据失败', error);
          // 出错时使用模拟数据
          this.bottles = [...this.mockBottles];
          this.updateStats();
        }
      },
      
      // 保存瓶子数据到本地存储
      saveBottles() {
        try {
          uni.setStorageSync('myBottles', JSON.stringify(this.bottles));
          // 更新统计数据
          this.updateStats();
        } catch (error) {
          console.error('保存瓶子数据失败', error);
        }
      },
      
      // 切换标签
      switchTab(tab) {
        this.activeTab = tab;
      },
      
      // 获取瓶子类型的样式类
      getBottleTypeClass(type) {
        switch (type) {
          case 'sent':
            return 'sent-bottle';
          case 'received':
            return 'received-bottle';
          default:
            return '';
        }
      },
      
      // 获取瓶子类型的图标
      getBottleTypeIcon(type) {
        switch (type) {
          case 'sent':
            return '📤';
          case 'received':
            return '📥';
          default:
            return '📦';
        }
      },
      
      // 获取瓶子类型的文本
      getBottleTypeText(type) {
        switch (type) {
          case 'sent':
            return '已发送';
          case 'received':
            return '已捞取';
          default:
            return '未知类型';
        }
      },
      
      // 获取标签名称
      getTabName(tab) {
        switch (tab) {
          case 'sent':
            return '已发送漂流瓶';
          case 'received':
            return '已捞取漂流瓶';
          case 'collected':
            return '已收藏漂流瓶';
          default:
            return '漂流瓶';
        }
      },
      
      // 获取空状态文本
      getEmptyStateText() {
        switch (this.activeTab) {
          case 'sent':
            return '快去扔出你的第一个漂流瓶吧！';
          case 'received':
            return '快去捞取漂流瓶，也许会有惊喜哦！';
          case 'collected':
            return '你还没有收藏任何漂流瓶';
          default:
            return '你还没有任何漂流瓶，快去体验吧！';
        }
      },
      
      // 查看瓶子详情
      viewBottleDetail(bottleId) {
        const bottle = this.bottles.find(b => b.id === bottleId);
        if (bottle) {
          this.selectedBottle = { ...bottle };
          this.showDetailModal = true;
        }
      },
      
      // 关闭详情弹窗
      closeDetailModal() {
        this.showDetailModal = false;
        this.selectedBottle = null;
      },
      
      // 切换喜欢状态
      toggleLike(bottleId) {
        const bottle = this.bottles.find(b => b.id === bottleId);
        if (bottle) {
          bottle.liked = !bottle.liked;
          this.saveBottles();
          showToast(bottle.liked ? '❤️ 已添加到喜欢' : '已取消喜欢');
        }
      },
      
      // 删除当前瓶子
      deleteCurrentBottle() {
        if (this.selectedBottle) {
          uni.showModal({
            title: '确认删除',
            content: '确定要删除这个漂流瓶吗？',
            success: (res) => {
              if (res.confirm) {
                // 从数组中删除瓶子
                const index = this.bottles.findIndex(b => b.id === this.selectedBottle.id);
                if (index > -1) {
                  this.bottles.splice(index, 1);
                  this.saveBottles();
                  this.closeDetailModal();
                  showToast('漂流瓶已删除');
                }
              }
            }
          });
        }
      },
      
      // 删除所有当前类型的瓶子
      deleteAllBottles() {
        uni.showModal({
          title: '确认删除',
          content: `确定要删除所有${this.getTabName(this.activeTab)}吗？`,
          success: (res) => {
            if (res.confirm) {
              // 根据当前标签删除瓶子
              switch (this.activeTab) {
                case 'sent':
                  this.bottles = this.bottles.filter(bottle => bottle.type !== 'sent');
                  break;
                case 'received':
                  this.bottles = this.bottles.filter(bottle => bottle.type !== 'received');
                  break;
                case 'collected':
                  // 取消所有瓶子的收藏状态
                  this.bottles.forEach(bottle => {
                    bottle.collected = false;
                  });
                  break;
                default:
                  // 删除所有瓶子
                  this.bottles = [];
                  break;
              }
              
              this.saveBottles();
              showToast(`${this.getTabName(this.activeTab)}已全部删除`);
            }
          }
        });
      }
    }
  };
</script>

<style scoped>
  @import '../../src/style/global.scss';
  
  .my-profile-container {
    width: 100%;
    min-height: 100vh;
    padding: 40rpx 30rpx;
    color: var(--white);
    position: relative;
  }
  
  /* 个人信息区域样式 */
  .profile-header {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 30rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    backdrop-filter: blur(10rpx);
  }
  
  .avatar-section {
    position: relative;
    margin-right: 30rpx;
  }
  
  .avatar {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(255, 255, 255, 0.3);
  }
  
  .user-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(69, 183, 209, 0.9);
    border-radius: 20rpx;
    padding: 8rpx 16rpx;
    font-size: 24rpx;
    border: 2rpx solid rgba(255, 255, 255, 0.5);
  }
  
  .user-info {
    flex: 1;
  }
  
  .username {
    font-size: 36rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .user-id {
    font-size: 26rpx;
    opacity: 0.7;
  }
  
  /* 会员标识样式 */
  .member-badge {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    width: 60rpx;
    height: 60rpx;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2rpx solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 5rpx 15rpx rgba(255, 215, 0, 0.3);
  }
  
  .member-icon {
    font-size: 36rpx;
  }
  
  /* 会员状态文本 */
  .member-status {
    font-size: 28rpx;
    color: #FFD700;
    margin-top: 10rpx;
    display: block;
    font-weight: 500;
  }
  
  .non-member-status {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 10rpx;
    display: block;
  }
  
  /* PLUS会员领星钻横幅按钮 */
  .member-promo {
    margin: 30rpx;
    background: linear-gradient(90deg, #7A28CA 0%, #9C27B0 100%);
    border-radius: 20rpx;
    padding: 25rpx 30rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 10rpx 30rpx rgba(122, 40, 202, 0.3);
  }
  
  .member-promo:active {
    opacity: 0.9;
    transform: scale(0.98);
  }
  
  .promo-icon {
    font-size: 40rpx;
    margin-right: 20rpx;
  }
  
  .promo-text {
    font-size: 32rpx;
    font-weight: bold;
  }
  
  /* 统计数据卡片样式 */
  .stats-card {
    display: flex;
    justify-content: space-around;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 30rpx;
    padding: 30rpx 20rpx;
    margin-bottom: 30rpx;
    backdrop-filter: blur(10rpx);
  }
  
  .stat-item {
    text-align: center;
  }
  
  .stat-value {
    font-size: 40rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .stat-label {
    font-size: 26rpx;
    opacity: 0.8;
  }
  
  /* 个人中心菜单样式 */
  .profile-menu {
    width: 100%;
  }
  
  .menu-group {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 30rpx;
    overflow: hidden;
    margin-bottom: 30rpx;
    backdrop-filter: blur(10rpx);
  }
  
  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
  }
  
  .menu-item:last-child {
    border-bottom: none;
  }
  
  .menu-item:active {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .menu-left {
    display: flex;
    align-items: center;
  }
  
  .menu-icon {
    font-size: 36rpx;
    margin-right: 20rpx;
    width: 40rpx;
    text-align: center;
  }
  
  .menu-text {
    font-size: 30rpx;
  }
  
  .menu-right {
    display: flex;
    align-items: center;
  }
  
  .menu-badge {
    background-color: rgba(69, 183, 209, 0.9);
    border-radius: 20rpx;
    padding: 4rpx 12rpx;
    font-size: 24rpx;
    margin-right: 10rpx;
    min-width: 30rpx;
    text-align: center;
  }
  
  .menu-arrow {
    font-size: 24rpx;
    opacity: 0.7;
  }
  
  /* 瓶子区域折叠样式 */
  .bottle-section {
    padding: 0 30rpx 30rpx;
    background-color: rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease;
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-20rpx);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* 筛选选项样式 */
  .filter-tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 40rpx;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20rpx;
    padding: 10rpx;
    margin-top: 30rpx;
  }
  
  .tab-item {
    padding: 15rpx 20rpx;
    border-radius: 15rpx;
    font-size: 28rpx;
    transition: all 0.3s ease;
  }
  
  .tab-item.active {
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: bold;
  }
  
  /* 瓶子列表样式 */
  .bottles-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }
  
  /* 退出登录按钮样式 */
  .logout-btn {
    width: 100%;
    padding: 28rpx;
    background-color: rgba(237, 85, 101, 0.9);
    color: var(--white);
    border-radius: 30rpx;
    font-size: 32rpx;
    text-align: center;
    margin-top: 50rpx;
    backdrop-filter: blur(10rpx);
    transition: all 0.3s ease;
  }
  
  .logout-btn:active {
    background-color: rgba(237, 85, 101, 1);
    transform: scale(0.98);
  }
  
  /* 底部间距 */
  .bottom-space {
    height: 120rpx;
  }
  
  .bottle-item {
    display: flex;
    align-items: center;
    padding: 25rpx;
    margin-bottom: 20rpx;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20rpx;
    backdrop-filter: blur(10rpx);
    transition: all 0.3s ease;
  }
  
  .bottle-item:active {
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .bottle-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    font-size: 36rpx;
  }
  
  .sent-bottle {
    background-color: rgba(69, 183, 209, 0.3);
  }
  
  .received-bottle {
    background-color: rgba(255, 165, 0, 0.3);
  }
  
  .bottle-info {
    flex: 1;
  }
  
  .bottle-content {
    font-size: 28rpx;
    line-height: 1.4;
    margin-bottom: 10rpx;
    display: block;
  }
  
  .bottle-meta {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    opacity: 0.8;
  }
  
  .bottle-actions {
    display: flex;
    align-items: center;
  }
  
  .action-btn {
    font-size: 32rpx;
    margin-left: 10rpx;
  }
  
  .empty-state {
    text-align: center;
    padding: 100rpx 0;
  }
  
  .empty-icon {
    font-size: 120rpx;
    margin-bottom: 20rpx;
  }
  
  .empty-text {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
    display: block;
  }
  
  .empty-subtext {
    font-size: 28rpx;
    opacity: 0.8;
  }
  
  /* 购买历史样式 */
  .purchase-list {
    width: 100%;
  }
  
  .purchase-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
  }
  
  .purchase-item:last-child {
    border-bottom: none;
  }
  
  .purchase-info {
    flex: 1;
  }
  
  .purchase-type {
    font-size: 30rpx;
    font-weight: 500;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .purchase-date {
    font-size: 24rpx;
    opacity: 0.7;
  }
  
  .purchase-price {
    font-size: 32rpx;
    font-weight: bold;
    color: #FFD700;
  }
  
  /* 空购买记录样式 */
  .empty-purchase {
    text-align: center;
    padding: 80rpx 0;
  }
  
  .empty-purchase .empty-icon {
    font-size: 100rpx;
    margin-bottom: 20rpx;
  }
  
  .empty-purchase .empty-text {
    font-size: 32rpx;
    opacity: 0.8;
  }
  
  .bottom-actions {
    margin-top: 40rpx;
    display: flex;
    justify-content: center;
  }
  
  .delete-all-btn {
    width: 100%;
    max-width: 400rpx;
  }
  
  /* 弹窗样式 */
  .bottle-detail-modal,
  .purchase-history-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 40rpx;
  }
  
  .modal-content {
    width: 100%;
    max-width: 600rpx;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 30rpx;
    backdrop-filter: blur(20rpx);
    overflow: hidden;
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
  }
  
  .modal-title {
    font-size: 32rpx;
    font-weight: bold;
  }
  
  .close-btn {
    font-size: 40rpx;
    line-height: 1;
  }
  
  .modal-body {
    padding: 30rpx;
  }
  
  .detail-bottle {
    padding: 30rpx;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    min-height: 200rpx;
    display: flex;
    align-items: center;
  }
  
  .detail-content {
    font-size: 28rpx;
    line-height: 1.6;
  }
  
  .detail-meta {
    display: flex;
    margin-bottom: 20rpx;
    font-size: 26rpx;
  }
  
  .detail-label {
    margin-right: 10rpx;
    opacity: 0.8;
    min-width: 80rpx;
  }
  
  .detail-value {
    font-weight: bold;
  }
  
  .modal-footer {
    display: flex;
    padding: 20rpx 30rpx 30rpx;
    justify-content: flex-end;
  }
  
  .modal-footer .btn {
    margin-left: 20rpx;
  }
</style>